<template>
  <el-form
    @submit.native.prevent="saveRole"
    ref="form"
    :model="roles"
    :rules="rules"
    label-width="80px"
  >
    <el-form-item label="ID">
      <el-input v-model="roles.rid" disabled></el-input>
    </el-form-item>

    <el-form-item label="权限名称" prop='rname'>
      <el-input
        v-model="roles.rname"
        ></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" native-type="submit">添加</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>


<script>
export default {
  name: "editUsers",
  data() {
    return {
        roles:{
            rid:'',
            rname:''
        },
        rules:{
            rname: [
          { required: true, message: "请输入角色名", trigger: "blur" },
        ],
        }
     
    };
  },
  methods: {
    saveRole() {
        this.$refs['form'].validate((valid)=>{
            if(!valid) return
        
      this.$http.post('addRole',{
            rid:this.roles.rid,
            rname:this.roles.rname,
        })
        .then(res => {
          console.log(res);
          if(res.data.meta.status==404){
              this.$message({
              message: "添加失败！",
              type: "error",
            });
          }
          else if(res.data.meta.status==400){
              this.$message({
              message: "角色名已存在",
              type: "error",
            });
          }
          else{
              this.$message({
              message: "添加成功！",
              type: "success",
            });
            this.$router.push("/main/roleList");
          }
             
        });
        })
    },

    fetch(){
        this.$http.get('roleList').then(res=>{
            // console.log(res.data.result.length);
            this.roles.rid=res.data.result.length+1
            console.log(this.roles.rid)
        })
    }
  },
  created(){
      this.fetch();
  }
};
</script>